<template>
  <div class="main-con flex1" style="overflow-y:auto">
    <div style="padding-bottom:60px;">
      <el-form
        :disabled="view"
        v-loading="loadOrderInfo"
        element-loading-text="正在加载订单数据"
        ref="orderForm"
        :model="order"
        :rules="rules"
        label-width="130px"
      >
        <el-card>
          <div slot="header">订单信息</div>
          <el-col :span="orderspan">
            <el-form-item label-width="90px" label="目的地" prop="destination">
              <base-select
                type="custom"
                code="htk-admin"
                v-model.trim="order.destination"
                url="country/selectCountries"
                placeholder="请选择路向（目的地）"
              ></base-select>
            </el-form-item>
          </el-col>
          <el-col :span="orderspan">
            <el-form-item label-width="80px" label="产品" prop="prdCode">
              <el-select
                style="width:100%"
                clearable
                filterable
                v-model="order.prdCode"
                placeholder="请选择产品"
              >
                <el-option
                  v-for="item in prds"
                  :key="item.id"
                  :label="item.prdName"
                  :value="item.prdCode"
                ></el-option>
              </el-select>
              <!-- <el-select
                style="width:100%"
                v-model="order.transportation"
                clearable
                filterable
                placeholder="请选择路线"
              >
                <el-option
                  v-for="item in trans"
                  :key="item.prdId"
                  :label="item.prdName"
                  :value="item.prdId"
                ></el-option>
              </el-select>-->
            </el-form-item>
          </el-col>
          <el-col :span="orderspan">
            <el-form-item label-width="90px" label="客户" prop="consumerCode">
              <el-select
                clearable
                filterable
                style="width:100%"
                :filter-method="filterMethod"
                v-model="order.consumerCode"
                placeholder="请选择客户"
              >
                <el-option
                  v-for="item in consumerOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                >
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="orderspan">
            <el-form-item label-width="90px" label="重量" prop="weight">
              <el-input-number
                style="width:100%"
                :min="0"
                :precision="3"
                v-model="order.weight"
                placeholder="请输入重量"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="orderspan">
            <el-form-item label-width="90px" label="订单号" prop="commodityCode">
              <el-input v-model="order.commodityCode" placeholder="订单号(不输入后台自动生成)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="orderspan">
            <el-form-item label-width="90px" label="转运单号" prop="afterCode">
              <el-input v-model="order.afterCode" placeholder="转运单号(不输入后台自动生成)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="orderspan">
            <el-form-item label-width="90px" label="备注" prop="rmk">
              <el-input style="width:100%" v-model.trim="order.rmk" placeholder="请输入备注"></el-input>
            </el-form-item>
          </el-col>
        </el-card>
        <el-card style="margin:5px 0 0 0">
          <div slot="header">物品信息</div>
          <el-row v-for="(item,index) in order.commodityList" :key="index">
            <el-col :span="4">
              <el-form-item label-width="90px" label="物品名称">
                <el-input style="width:100%" v-model="item.commodityName" placeholder="请输入物品名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label-width="90px" label="数量">
                <el-input-number
                  :min="1"
                  :style="thingStyle"
                  v-model="item.amount"
                  placeholder="请输入数量"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label-width="90px" label="重量">
                <el-input-number
                  :min="0"
                  :precision="3"
                  :style="thingStyle"
                  v-model="item.weight"
                  placeholder="请输入重量"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label-width="90px" label="申报价" prop="commodityValue">
                <el-input-number
                  :min="0"
                  :precision="3"
                  :style="thingStyle"
                  v-model="item.commodityValue"
                  placeholder="请输入申报价"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label-width="90px" label="原产地" prop="countryOfOrigin">
                <el-input :style="thingStyle" v-model="item.countryOfOrigin" placeholder="请输入原产地"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="text-align:center">
              <el-button
                v-if="index == 0"
                @click="addCommodity"
                type="primary"
                icon="el-icon-plus"
                circle
              ></el-button>
              <el-button
                v-else
                @click="removeCommodity(index)"
                type="danger"
                icon="el-icon-minus"
                circle
              ></el-button>
            </el-col>
            <!-- <el-col :span="thingSpan">
              <el-form-item label="规格型号" prop="specificationModel">
                <el-input-number
                  :style="thingStyle"
                  v-model="order.specificationModel"
                  placeholder="请输入规格型号"
                ></el-input-number>
              </el-form-item>
            </el-col>-->
            <!-- <el-col :span="thingSpan">
              <el-form-item label="毛重(G)" prop="roughWeight">
                <el-input-number
                  :style="thingStyle"
                  :min="0"
                  :precision="5"
                  v-model="order.roughWeight"
                  placeholder="请输入毛重"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="thingSpan">
              <el-form-item label="净重(G)" prop="netWeight">
                <el-input-number
                  :min="0"
                  :precision="5"
                  :style="thingStyle"
                  v-model="order.netWeight"
                  placeholder="请输入净重"
                ></el-input-number>
              </el-form-item>
            </el-col>-->
            <!-- <el-col :span="thingSpan">
              <el-form-item label="长" prop="longs">
                <el-input-number
                  :min="0"
                  :style="thingStyle"
                  v-model="order.longs"
                  placeholder="请输入长"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="thingSpan">
              <el-form-item label="宽" prop="width">
                <el-input-number
                  :min="0"
                  :style="thingStyle"
                  v-model="order.width"
                  placeholder="请输入宽"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="thingSpan">
              <el-form-item label="高" prop="high">
                <el-input-number
                  :min="0"
                  :style="thingStyle"
                  v-model="order.high"
                  placeholder="请输入高"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="thingSpan">
              <el-form-item label="单价" prop="price">
                <el-input-number
                  :style="thingStyle"
                  :min="0"
                  :precision="2"
                  v-model="order.price"
                  placeholder="请输入单价"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="thingSpan">
              <el-form-item label="总价" prop="totalPrices">
                <el-input-number
                  :min="0"
                  :style="thingStyle"
                  :precision="2"
                  v-model="order.totalPrices"
                  placeholder="请输入总价"
                ></el-input-number>
              </el-form-item>
            </el-col>-->
          </el-row>
        </el-card>
        <el-card style="margin:5px 0">
          <div slot="header">发件人信息</div>
          <el-col :span="span">
            <el-form-item label="发件人姓名" prop="senderName">
              <el-input v-model="order.senderName" placeholder="请输入发件人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="发件人电话" prop="senderPhone">
              <el-input v-model="order.senderPhone" placeholder="请输入发件人电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="发件人地址" prop="senderAddress">
              <el-input type="textarea" v-model="order.senderAddress" placeholder="请输入发件人地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="发件人身份证" prop="senderIdNumber">
              <el-input v-model="order.senderIdNumber" placeholder="请输入发件人身份证"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="发件人邮编" prop="senderPostcode">
              <el-input v-model="order.senderPostcode" placeholder="请输入发件人邮编"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="发件人公司名称" prop="senderCompany">
              <el-input v-model="order.senderCompany" placeholder="请输入发件人公司名称"></el-input>
            </el-form-item>
          </el-col>
        </el-card>
        <el-card style="margin:5px 0">
          <div slot="header">收件人信息</div>
          <el-col :span="span">
            <el-form-item label="收件人姓名" prop="recipientsName">
              <el-input v-model="order.recipientsName" placeholder="请输入收件人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="收件人电话" prop="recipientsPhone">
              <el-input v-model="order.recipientsPhone" placeholder="请输入收件人电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="收件人地址" prop="recipientsAddress">
              <el-input type="textarea" v-model="order.recipientsAddress" placeholder="请输入收件人地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="收件人身份证" prop="recipientsIdNumber">
              <el-input v-model="order.recipientsIdNumber" placeholder="请输入收件人身份证"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="收件人邮编" prop="recipientsPostcode">
              <el-input v-model="order.recipientsPostcode" placeholder="请输入收件人邮编"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="收件人公司名称" prop="recipientsCompany">
              <el-input v-model="order.recipientsCompany" placeholder="请输入收件人公司名称"></el-input>
            </el-form-item>
          </el-col>
        </el-card>
      </el-form>
    </div>
    <div class="footer">
      <el-button v-if="!view" v-auth="'saveOrder'" type="primary" @click="saveOrder">保存</el-button>
      <el-button v-if="!view" @click="reset">重置</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "NewOrder",
  props: {
    extraData: {
      type: Object,
      default() {
        return {};
      }
    },
    view: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loadOrderInfo: false,
      span: 8,
      orderspan: 6,
      thingSpan: 6,
      thingStyle: { width: "100%" },
      trans: [],
      parentConsumers: [],
      consumerOptions: [],
      order: {
        id: "",
        commodityCode: "",
        afterCode: "",
        commodityName: "",
        recipientsName: "",
        recipientsCompany: "",
        recipientsPhone: "",
        recipientsAddress: "",
        recipientsIdNumber: "",
        senderName: "",
        senderPhone: "",
        senderCompany: "",
        senderAddress: "",
        senderPostcode: "",
        senderIdNumber: "",
        weight: 0,
        roughWeight: "",
        netWeight: "",
        longs: "",
        width: "",
        high: "",
        amount: 0,
        price: "",
        totalPrices: "",
        transportation: "",
        rmk: "",
        commodityList: [
          {
            id: "",
            commodityName: "",
            commodityValue: "",
            amount: 0,
            weight: 0,
            countryOfOrigin: ""
          }
        ]
      },
      rules: {
        consumerCode: [
          {
            required: true,
            message: "请选择客户",
            trigger: ["change", "blur"]
          }
        ],
        weight: [
          {
            required: true,
            message: "请输入重量",
            trigger: ["change", "blur"]
          }
        ],
        prdCode: [
          {
            required: true,
            message: "请选择产品",
            trigger: ["change", "blur"]
          }
        ],
        destination: [
          {
            required: true,
            message: "请输入目的地",
            trigger: ["change", "blur"]
          }
        ],
        recipientsName: [
          {
            required: true,
            message: "请输入收件人姓名",
            trigger: ["change", "blur"]
          }
        ],
        recipientsPhone: [
          {
            required: true,
            message: "请输入收件人电话",
            trigger: ["change", "blur"]
          }
        ],
        recipientsAddress: [
          {
            required: true,
            message: "请输入收件人地址",
            trigger: ["change", "blur"]
          }
        ],
        senderName: [
          {
            required: true,
            message: "请输入发件人姓名",
            trigger: ["change", "blur"]
          }
        ],
        senderPhone: [
          {
            required: true,
            message: "请输入发件人电话",
            trigger: ["change", "blur"]
          }
        ],
        senderAddress: [
          {
            required: true,
            message: "请输入发件人地址",
            trigger: ["change", "blur"]
          }
        ]
      },
      prds: []
    };
  },
  watch: {
    "order.destination"(v) {
      console.log(v);
      this.getTrans();
    }
    // extraData: {
    //   immediate: true,
    //   handler(v) {
    //     if (v.id) {
    //       this.order = Object.assign({}, v);
    //     } else {
    //       this.order = Object.assign({}, this.defaultOrder);
    //     }
    //   }
    // }
  },
  created() {
    this.defaultOrder = JSON.parse(JSON.stringify(this.$data.order));
    // this.getPrdList();
  },
  mounted() {},
  activated() {
    this.getParentConsumers();
    console.log(this.extraData);
    if (this.$refs.orderForm) {
      this.$refs.orderForm.resetFields();
    }
    if (this.extraData.id) {
      this.order = Object.assign({}, this.extraData);
    } else {
      this.order = Object.assign({}, this.defaultOrder);
    }
  },
  methods: {
    getPrdList() {
      let me = this;
      me.$http.ajax({
        url: "product/getAll",
        code: "htk",
        success: res => {
          me.prds = res;
        }
      });
    },
    getParentConsumers() {
      let me = this;
      me.$http.ajax({
        url: "consumer/listChildren/" + me.$store.state.admin.orgId,
        success: res => {
          me.parentConsumers = res;
          me.consumerOptions = res;
        }
      });
    },
    filterMethod(query) {
      let me = this;
      if (!query.trim()) {
        me.consumerOptions = me.parentConsumers;
      } else {
        me.consumerOptions = me.parentConsumers.filter(consumer => {
          return (
            consumer.name.toLowerCase().indexOf(query.toLowerCase()) > -1 ||
            consumer.code.toLowerCase().indexOf(query.toLowerCase()) > -1
          );
        });
      }
    },
    addCommodity() {
      this.order.commodityList.push({
        id: "",
        commodityName: "",
        commodityValue: "",
        amount: 0,
        weight: 0
      });
    },
    removeCommodity(index) {
      this.order.commodityList.splice(index, 1);
    },
    getTrans() {
      let me = this;
      me.$http.ajax({
        url: "product/listProductByCountry/" + me.order.destination,
        code: "htk",
        success(res) {
          me.prds = res;
        }
      });
    },
    saveOrder() {
      let me = this;
      me.$refs["orderForm"].validate(valid => {
        if (valid) {
          if (me.order.commodityList.length > 0) {
            let errorMsg = "";
            for (let i = 0; i < me.order.commodityList.length; i++) {
              let item = me.order.commodityList[i];
              if (!item.commodityName) {
                errorMsg = "请输入物品信息";
                break;
              }
              if (!item.amount) {
                errorMsg = "请输入物品数量";
                break;
              }
              if (!item.weight) {
                errorMsg = "请输入物品重量";
                break;
              }
            }
            if (errorMsg) {
              this.$message.warning(errorMsg);
              return;
            }
          }
          if (!me.order.id) {
            me.order.roughWeight = me.order.weight;
          }
          me.$http.ajax({
            url: "order/saveOrder",
            data: me.order,
            code: "htk",
            success: res => {
              me.$message.success("保存成功");
              me.showAddOrderDialog = false;
            }
          });
        }
      });
    },
    reset() {
      this.$refs.orderForm.resetFields();
      this.order = Object.assign({}, this.defaultOrder);
    }
  }
};
</script>

<style scoped>
.footer {
  text-align: center;
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
}
</style>
